<!-- 最左边的选择框 -->
<template>
  <div class="mycard">
    <div class="navbar" @click="clearSearch">
      <router-link to="/chat" :class="activeIndex===0?noactive:actives">
        <img class="nav-l" src="../../assets/images/message.png" alt />
        <div class="nav-content">消息列表</div>
      </router-link>
      <router-link to="/friend">
        <img class="nav-l" src="../../assets/images/friendList.png" alt />
        <div class="nav-content">好友列表</div>
      </router-link>
      <router-link to="/file">
        <img class="nav-l" src="../../assets/images/files.png" alt />
        <div class="nav-content">文件管理</div>
      </router-link>
      <router-link to="/my">
        <img class="nav-l" src="../../assets/images/newWork.png" alt />
        <div class="nav-content">新建任务</div>
      </router-link>
    </div>
    <div class="change" @click="changePassword">
      <img class="nav-b" src="../../assets/images/set.png" alt />
      <div class="nav-content2">设置</div>
    </div>
    <div class="out" @click="loginOut">
      <img class="nav-b" src="../../assets/images/return.png" alt />
      <div class="nav-content2">退出</div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data(){
    return {
      activeIndex: 0
    }
  },
  computed: {
    ...mapState(["user"])
  },
  methods: {
    clearSearch() {
      this.$store.dispatch("search", "");
    },
    loginOut() {
      this.$http.get("/index/logout.do").then(res => {
        if (res.status == 200) {
          this.$router.push("/login");
        }
      });
    },
    changePassword() {
      this.$router.push("/change");
    }
  }
};
</script>
<style>

</style>
<style lang="stylus" scoped>
@import '../../assets/fonts/iconfont.css';

.mycard {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgb(17, 49, 94);

  .out {
    width: 100%;
    position: absolute;
    justify-content :center;
    font-size : 17px;
    height : 8vh;
    line-height : 8vh;
    display : flex;
    bottom: 2vh;
    left: 0;
    color: #fff;
    cursor: pointer;
  }

  .change {
    width: 100%;
    position: absolute;
    display : flex;
    justify-content :center;
    bottom: 10vh;
    height : 8vh;
    line-height : 8vh;
    left: 0;
    color: #fff;
    cursor: pointer;
  }
  .out:hover,.change:hover,.navbar a:hover {
    background-color : rgb(27,71,126)
  }
  .navbar {
    width: 100%;
    text-align: center;
  }

  .navbar a {
    display: flex;
    width: 100%;
    height: 8vh;
    line-height: 8vh;
    justify-content: center;
  }

  .noactive {
  }

  .actives {
    background-image: url('../../assets/images/active.jpg');
    background-size: 100% 100%;
  }

  .nav-l {
    width: 2.7vh;
    height: 2.7vh;
    position: relative;
    top: 2.5vh;
    margin-right: 12px;
  }
  .nav-b {
    width: 3.2vh;
    height: 3.2vh;
    position: relative;
    top: 2.5vh;
    margin-right: 12px;
  }

  .nav-content {
    color: white;
    font-size: 2vh;
  }

  .icon {
    display: inline-block;
    font-size: 26px;
    margin-top: 28px;
    padding: 0 16px;
    box-sizing: border-box;
    color: rgb(173, 174, 175);
    opacity: 0.8;
    cursor: pointer;

    &.active {
      color: rgb(0, 220, 65);
    }

    &:hover {
      opacity: 1;
    }
  }

  .icon-msg, .icon-more {
    font-size: 22px;
  }

  .icon-msg {
    padding: 0 19px;
  }
}
</style>
